<template>
  <div 
    v-show="showBackToTop"
    @click="scrollToTop"
    class="fixed bottom-6 right-6 cursor-pointer z-50"
    title="back to top"
  >
    <svg-icon 
      name="arrow-top" 
      height="36px" 
      width="36px" 
      fill="var(--primary-color)" 
    />
  </div>
</template>

<script setup>
// 返回顶部按钮显示状态
const showBackToTop = ref(false)

// 返回顶部功能
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 处理滚动事件
const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300
}

// 在客户端挂载后添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
/* 可以添加一些悬停效果 */
div:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
</style>
